<template>
  <div class="video-wrap">
    <div class="video-box" v-if="showVideo">
    </div>
    <div class="video-con" v-else>
      <div class="video-logo">
        <img :src="video" class="logo" onclick="return false"/>
        <div class="play" @click="playVideo"><img src="./play.png" class="icon" onclick="return false"></div>
      </div>
    </div>
    <div class="video-title">
      <div class="word">{{word}}</div>
    </div>
    <div class="video-look"></div>
  </div>
</template>

<script>
  import {getUrlKey} from "../../config/util"

  export default {
    data() {
      return {
        showVideo: false,
        word: "",
        video: "",
      }
    },
    mounted() {
      let video = getUrlKey("videoCover");
      let title = getUrlKey("videoTitle");
      if (title != "" && title != undefined) {
        this.word = decodeURI(title);
      }
      if (video != "" && video != undefined) {
        this.showVideo = false;
        this.video = video;
      } else {
        this.showVideo = true;
      }
    },
    methods: {
      playVideo() {
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
          window.location.href = "https://itunes.apple.com/cn/app/id1441365926?mt=8";
        } else if (navigator.userAgent.match(/android/i)) {
          window.location.href = "https://android.myapp.com/myapp/detail.htm?apkName=com.lanpin.app&ADTAG=mobile";
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .video-wrap
    width: 100%
    height: 100%
    overflow: hidden
    .video-box
      width: 100%
      height: 5.6rem
      background: url("./video.png") no-repeat
      background-size: 100% 100%
    .video-con
      position: relative
      width: 100%
      height: 5.6rem
      .video-logo
        width: 100%
        height: 5.6rem
        .logo
          width: 100%
          height: 100%
        .play
          position: absolute
          top: 0rem
          bottom: 0rem
          margin: 0 auto
          width: 100%
          display: flex
          justify-content: center
          align-items: center
          .icon
            width 1.467rem
            height: 1.467rem
    .video-title
      width: 92%
      margin: 0 auto
      margin-top: 0.667rem
      .word
        font-size: 0.56rem
        color: rgba(27, 27, 27, 1)
        line-height: 0.8rem
    .video-look
      position: absolute
      bottom: 0rem
      width: 100%
      height 5.467rem
      background: url("./look.png") no-repeat
      background-size: 100% 100%
</style>
